<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}"> <!--引入自定义CSS样式-->
</head>
<body>
    <!--导航-->
    <nav th:replace="_fragments :: menu(5)" class="ui inverted attached segment me-padded-tb-mini me-shadow-small"> <!--引入css样式-->

    </nav>

    <!--中间内容-->
    <div class="me-container me-padded-tb-large">
        <div class="ui container">
            <div class="ui stackable grid">
                <div class="eleven wide column" style="text-align: center">
                    <img th:src="@{/images/knight.jpg}" src="../static/images/knight.jpg" alt="" class="ui rounded image" style="width: 100%; margin: 0 auto">
                </div>
                <div class="five wide column">
                    <div class="ui top attached segment">
                        <h4 class="ui header">关于我</h4>
                    </div>
                    <div class="ui attached segment">
                        <p class="me-text-space me-text-thin me-text-lined me-opacity-mini">
                            20fall ECE研究生，转行不易，前途迷茫。研究方向：audio signal processing, state recognition。
                        </p>
                        <br>
                        <p class="me-text-space me-text-thin me-text-lined me-opacity-mini">
                            这是@泽的第一个个人博客，基于b站教程”Springboot开发一个小而美的个人博客“搭建。
                            后续会继续完善前端页面，优化后端逻辑。
                        </p>
                    </div>
                    <div class="ui attached segment">
                        <div class="ui grid">
                            <div class="five wide column">
                                <div class="ui basic orange left pointing label">Coding</div>
                            </div>
                            <div class="five wide column">
                                <div class="ui basic orange left pointing label">Audio</div>
                            </div>
                            <div class="six wide column">
                                <div class="ui basic orange left pointing label">摇滚</div>
                            </div>
                        </div>
                    </div>
                    <div class="ui attached segment">
                        <div class="ui basic blue left pointing label">现实的理想主义者</div>
                    </div>
                    <div class="ui bottom attached segment">
                        <a href="https://github.com/stg1205" target="_blank" class="ui circular icon button"><i class="github icon"></i></a>
                        <a href="#" class="ui wechat circular icon button"><i class="weixin icon"></i></a>
                        <a href="#" class="ui qq circular icon button" data-content="1014922487"><i class="qq icon"></i></a>
                        <a href="#" class="ui circular icon button"><i class="facebook icon"></i></a>
                    </div>

                    <div class="ui wechat-QR flowing popup top left transition hidden">
                        <img th:src="@{/images/wechat.jpg}" src="../static/images/wechat.jpg" alt="" class="ui rounded image" style="width: 100px;">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--底部footer-->
    <footer th:replace="_fragments :: footer" class="ui inverted vertical segment me-padded-tb-max"><!--vertical消除圆角，用attached好像也行-->

    </footer>
    <th:block th:replace="_fragments :: script"></th:block>

    <script>
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('me-mobile-hide');/*toggleClass，取反函数*/
        });
        $('.qq').popup({
            position: 'bottom center'
        });
        $('.wechat').popup({
            popup: $('.wechat-QR.popup'),
            position: 'bottom center'
        });

        //要加后面的""里的地址
        $('#newBlog-container').load(/*[[@{/footer/newBlogs}]]*/"/footer/newBlogs");
    </script>
</body>
</html>